[Interactive Graph] Add example function area for locked function settings #1600

mark-fitzgerald · 2024-09-06T19:04:00Z

Summary:

Having a list of sample functions available to quickly copy/paste into the locked function settings can be very helpful for content creators. This PR adds that capability, along with an updatable file (locked-function-examples.ts) for adding/modifying example functions.

Issue: LEMS-1948

Test plan:

Launch Storybook (yarn start)
Navigate to Perseus Editor => Editor => Demo Interactive Graph
Open the "interactive-graph 1" widget settings
Click on the "Add locked figure" drop-down at the bottom of the editor and choose "Function"
Below the "domain min/max" fields there is an "examples" dropdown, and instructions to the right.
Choose an example category from the dropdown.
- Note that the instructions are replaced by examples for that category.
- Currently, there are only 2 examples per category, but if you edit the DOM and add another list item, you can see that the area's height is limited, and you can scroll to see the additional example(s).
Copy one of the examples by clicking on the copy icon to the left of the example that you want.
Paste the contents of the clipboard into the equation field (above the domain min/max section).

Affected UI

New settings feature

Adjust styling of content list to match other settings.

Add unit tests.

…ed-function

khan-actions-bot · 2024-09-06T19:04:16Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/few-boats-retire.md, packages/perseus-editor/src/components/__tests__/locked-function-settings.test.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-function-examples.ts, packages/perseus-editor/src/components/graph-locked-figures/locked-function-settings.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2024-09-06T19:06:20Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (f396ccd) and published it to npm. You
can install it using the tag PR1600.

Example:

yarn add @khanacademy/perseus@PR1600

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1600

github-actions · 2024-09-06T19:06:37Z

Size Change: +972 B (+0.11%)

Total Size: 861 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	277 kB	+972 B (+0.35%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	38.3 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	4.27 kB
`packages/math-input/dist/es/index.js`	78 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	1.48 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus/dist/es/index.js`	417 kB
`packages/perseus/dist/es/strings.js`	3.36 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.4 kB

_{compressed-size-action}

codecov · 2024-09-06T19:17:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.32%. Comparing base (08068dc) to head (f396ccd).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1600      +/-   ##
==========================================
- Coverage   70.58%   70.32%   -0.26%     
==========================================
  Files         547      573      +26     
  Lines      107178   111820    +4642     
  Branches     7831    11238    +3407     
==========================================
+ Hits        75652    78642    +2990     
- Misses      31335    33178    +1843     
+ Partials      191        0     -191

see 1120 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 08068dc...f396ccd. Read the comment docs.

Added a label for the category popup. Added a 'paste' button that directly changes the equation field to be the example function. Added/updated unit tests accordingly.

nishasy

This is so exciting!

nishasy · 2024-09-09T22:03:13Z

packages/perseus-editor/src/components/__tests__/locked-function-settings.test.tsx

+                    {wrapper: RenderStateRoot},
+                );
+
+                // Assert - "y" axis means "range"


I like your system of adding extra context to the arrange/act/assert comments. I'm gonna start doing this too.

nishasy · 2024-09-09T22:03:47Z

packages/perseus-editor/src/components/graph-locked-figures/locked-function-settings.tsx

@@ -45,34 +49,37 @@ const LockedFunctionSettings = (props: Props) => {
        onRemove,
    } = props;
    const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
+    const domainRangeText = directionalAxis === "x" ? "domain" : "range";


nishasy · 2024-09-09T22:06:59Z

packages/perseus-editor/src/components/graph-locked-figures/locked-function-settings.tsx

+                onClick={() => pasteEquationFn("equation", example)}
+                size="medium"
+                style={styles.copyPasteButton}
+            />


Optional suggestion: Since content authors usually use desktop + mouse/keyboard, I think it would be appropriate to use a title prop here so that someone can hover over the icon to learn what it does.

Since <IconButton> doesn't have a title property available, I'm unable to add this directly. So, leaving this off for now.

nishasy

One more comment!

nishasy · 2024-09-09T22:09:02Z

packages/perseus-editor/src/components/graph-locked-figures/locked-function-settings.tsx

+                aria-label="paste example"
+                aria-describedby={exampleId}
+                onClick={() => pasteEquationFn("equation", example)}
+                size="medium"


I think if you use size="small" here, it'll have the icons remain the same size, and the padding around them becomes smaller. This might be worth trying and seeing if the spacing looks better inline here? Let me know what you think.

Yes, specifying "small" does keep the icon the same size. However, I'm going to keep it as is in order to keep the target area the current size (40px) as a best practice. If we get word from content creators that they prefer more space for the equation text, then we can adjust at that time.

…ed-function

@handeyeco

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Major Changes - [#1591](#1591) [`05d048026`](05d0480) Thanks [@handeyeco](https://github.com/handeyeco)! - Move interaction-editor sub-components into perseus-editor ### Minor Changes - [#1568](#1568) [`eddcb9417`](eddcb94) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph + Editor] Add a full graph aria-label and aria-description/describedby to interactive graphs, as well as the UI for content authors to add this in the interactive graph editor ### Patch Changes - [#1540](#1540) [`08068dc71`](08068dc) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Resolve improperly scaled text/labels in Graphie images when viewed in mobile (constrained viewports) - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets - [#1599](#1599) [`71715afd2`](71715af) Thanks [@benchristel](https://github.com/benchristel)! - Internal: improve type safety of interactive graph editor - [#1590](#1590) [`6c4e9e154`](6c4e9e1) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move InteractiveGraphEditor to its own directory ## @khanacademy/[email protected] ### Minor Changes - [#1600](#1600) [`bdb382fda`](bdb382f) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Interactive Graph - Add example functions for copy/paste to locked functions settings - [#1568](#1568) [`eddcb9417`](eddcb94) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph + Editor] Add a full graph aria-label and aria-description/describedby to interactive graphs, as well as the UI for content authors to add this in the interactive graph editor ### Patch Changes - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1591](#1591) [`05d048026`](05d0480) Thanks [@handeyeco](https://github.com/handeyeco)! - Move interaction-editor sub-components into perseus-editor - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets - [#1599](#1599) [`71715afd2`](71715af) Thanks [@benchristel](https://github.com/benchristel)! - Internal: improve type safety of interactive graph editor - [#1590](#1590) [`6c4e9e154`](6c4e9e1) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move InteractiveGraphEditor to its own directory - Updated dependencies \[[`08068dc71`](08068dc), [`d88b0ffdf`](d88b0ff), [`eddcb9417`](eddcb94), [`05d048026`](05d0480), [`435f3f6d8`](435f3f6), [`71715afd2`](71715af), [`6c4e9e154`](6c4e9e1)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets Author: khan-actions-bot Reviewers: mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ❌ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1597

Mark Fitzgerald added 5 commits August 23, 2024 14:35

Add example content area in settings for locked functions.

35c4d17

Add example content via a JS object (imported).

bde44b0

Adjust styling of content list to match other settings.

Refactor example equations to be a list instead of <div> tags.

6993e9d

Add unit tests.

Merge branch 'main' into LEMS-1948-add-example-function-area-for-lock…

6e99a6e

…ed-function

Add changeset.

109f306

mark-fitzgerald self-assigned this Sep 6, 2024

mark-fitzgerald requested a review from a team September 6, 2024 19:04

Resolve lint error in unit test.

2284089

Adjusted UI to have the list of examples under the category popup.

ce80a8e

Added a label for the category popup. Added a 'paste' button that directly changes the equation field to be the example function. Added/updated unit tests accordingly.

nishasy approved these changes Sep 9, 2024

View reviewed changes

Merge branch 'main' into LEMS-1948-add-example-function-area-for-lock…

f396ccd

…ed-function

mark-fitzgerald merged commit bdb382f into main Sep 10, 2024
11 of 13 checks passed

mark-fitzgerald deleted the LEMS-1948-add-example-function-area-for-locked-function branch September 10, 2024 20:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Interactive Graph] Add example function area for locked function settings #1600

[Interactive Graph] Add example function area for locked function settings #1600

mark-fitzgerald commented Sep 6, 2024 •

edited

Loading

khan-actions-bot commented Sep 6, 2024

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

codecov bot commented Sep 6, 2024 •

edited

Loading

nishasy left a comment

nishasy Sep 9, 2024

nishasy Sep 9, 2024

nishasy Sep 9, 2024

mark-fitzgerald Sep 10, 2024

nishasy left a comment

nishasy Sep 9, 2024

mark-fitzgerald Sep 10, 2024

[Interactive Graph] Add example function area for locked function settings #1600

[Interactive Graph] Add example function area for locked function settings #1600

Conversation

mark-fitzgerald commented Sep 6, 2024 • edited Loading

Summary:

Test plan:

Affected UI

New settings feature

khan-actions-bot commented Sep 6, 2024

Gerald

github-actions bot commented Sep 6, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Sep 6, 2024 • edited Loading

codecov bot commented Sep 6, 2024 • edited Loading

Codecov Report

nishasy left a comment

Choose a reason for hiding this comment

nishasy Sep 9, 2024

Choose a reason for hiding this comment

nishasy Sep 9, 2024

Choose a reason for hiding this comment

nishasy Sep 9, 2024

Choose a reason for hiding this comment

mark-fitzgerald Sep 10, 2024

Choose a reason for hiding this comment

nishasy left a comment

Choose a reason for hiding this comment

nishasy Sep 9, 2024

Choose a reason for hiding this comment

mark-fitzgerald Sep 10, 2024

Choose a reason for hiding this comment

mark-fitzgerald commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

codecov bot commented Sep 6, 2024 •

edited

Loading